<template>
  <div class="usermanager_box">
    <div class="usermanager_box_title">
      用户列表
    </div>
    <!-- <div class="search_content">
      <div class="num">用户编号</div>
      <el-input v-model="userid" placeholder="请输入用户编号"></el-input>
      <div class="num">用户名称</div>
      <el-input v-model="username" placeholder="请输入用户名称"></el-input>
      <div class="num">创建时间</div>
      <div class="block">
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </div>
    <div class="button_box">
      <el-button type="primary" icon="el-icon-search" class="search_button">搜索</el-button>
      <el-button>重置</el-button>
    </div> -->
    <div class="table_box">
       <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="用户编号"
          width="80">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.userId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="用户名称"
          width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="用户积分"
          width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.points }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="创建日期"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time" style="margin-left: 10px;cursor: pointer;"></i>
            <span style="margin-left: 10px">{{ new Date(scope.row.createTime).getFullYear().toString()}}年
            {{ (new Date(scope.row.createTime).getMonth() + 1).toString()}}月
            {{ new Date(scope.row.createTime).getDate().toString()}}日
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="用户参数调整"
          width="140">
          <template slot-scope="scope">
            <i class="el-icon-arrow-right" style="margin-left: 10px; cursor: pointer;" @click="goDetail(scope.row.userId)"></i>
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="130">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="toUserArts(scope.row.userId)">查看文章</el-button>
          </template>
        </el-table-column>
         <el-table-column label="用户状态">
          <template slot-scope="scope">
            <div
              v-if="scope.row.state == 'readAndWrite'"
              >正常用户</div>
               <div
              v-else
              >已封禁</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>  
</template>

<script>
import {getAllUser} from '@/api/api'
export default {
  data(){
    return{
      userid:'',
      tableData: []
    }
  },
  created(){
    getAllUser().then((response) => {
      console.log(response)
         this.tableData=response.data
      })
  },
  methods:{
    goDetail(key){
      localStorage.setItem('userid',key)
      this.$router.push({
        name:'UserDetail' ,
        params:{
          userid:key
        }
      })
    },
    toUserArts(key){
       localStorage.setItem('userid',key)
      console.log('userid',key)
      this.$router.push({
        name:'UserArt' ,
        params:{
          userid:key
        }
      })
    }
  }
}
</script>

<style>
.table_box{
  margin: 0 auto;
  
}
.el-pagination{
  margin-left: 35vw!important;
}
.search_content{
  margin-top: 3vh;
}
.el-button{
  margin-right: 2vw!important;
}
.button_box{
  margin-top: 3vh;
}
.block2{
  margin-top: 2vw;
}
.num{
  width: 7vw;
}
.block{

  margin-left: 2vw;
}
.el-color-picker__icon, .el-input, .el-textarea {
  width: 47%!important;
}
.el-input__inner{
  width: 65%!important;
}
.el-date-editor--daterange{
  width: 100%!important;
}
.search_content{
  display: flex;
  align-items: center;
  text-align: center;
}
.usermanager_box{
  height: 75vh;
}
.usermanager_box_title{
  color: #000;
}
</style>